import React from 'react'
import PropTypes from 'prop-types'
import {Table, Icon} from 'antd'
import classnames from 'classnames'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'

const Modals = ({
                isMotion, ...tableProps
              }) => {

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 100,
      render: (text, record, index) => {return (index+1)},
    }, {
      title: '编号',
      dataIndex: 'sn',
      key: 'sn',
    }, {
      title: '菜单',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => {
        return <div><Icon type={record.icon}/> <span>{text}</span></div>
      },
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      columns={columns}
      simple
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

Modals.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default Modals
